<html>
	<head>
		
		<meta name="layout" content="main" />
		<title>Árbol de directorios</title>
		
		<script type="text/javascript" src="/${grails.util.Metadata.current.'app.name'}/js/jquery/jquery-ui-1.8.18.custom.js"></script>
		<script type="text/javascript" src="/${grails.util.Metadata.current.'app.name'}/js/sortable/jquery-sortable.js"></script>
		<script>
			$(function  () {


				
				var group = $("ol.serialization").sortable({
					  group: 'serialization',
					  delay: 500,
					  handle: 'i.icon-move',
					  onDrop: function (item, container, _super) {
					    var data = group.sortable("serialize").get();

					    var jsonString = JSON.stringify(data, null, ' ');

						$.post("/CMS/test02/index2",{sourceId: "w", extra: "33", allTreeContent:jsonString},function(response){
					        // Process response here.
					        
					    });

					    
					    $('#serialize_output2').text(jsonString);
					    _super(item, container)
					  }
					})
					
				/* *************************** */
				//Click para esconder elementos de la lista	
				//$("li").click(function(){
				//	jQuery(this).children('ol').toggle();
				//	return false;
				//});
					$("a").click(function(){
						jQuery(this).siblings('ol').toggle();
						return false;
					});
				

				
			 

			})
		</script>
		<style>
			body.dragging, body.dragging * {
			  cursor: move !important;
			}

			.dragged {
			  position: absolute;
			  opacity: 0.5;
			  z-index: 2000;
			}

			ol.example li.placeholder {
			  position: relative;
			  /** More li styles **/
			}
			ol.example li.placeholder:before {
			  position: absolute;
			  /** Define arrowhead **/
			}
			.icon-move{
				background-image: url("../images/icons/icon-move.png");
				cursor: pointer;
			}
		</style>
		
		<wcm:myTag />
	</head>
	<body>

		

<br> TABLA CON SERIALIZACION <br>
<ol class="serialization vertical">
                <li data-id="0" data-name="Item 1">
                  <i class="icon-move">sss</i>
                  Item 1
                  <ol></ol>
                </li>
                <li data-id="1" data-name="Item 2">
                	<i class="icon-move">sss</i>
                  	Item 2
                  	<ol></ol>
                </li>
                <li data-id="2" data-name="Item 3">
                	<i class="icon-move">sss</i>
                  	Item 2 y medio
                  	<ol></ol>
                </li>
                <li data-id="3" data-name="Item 4">
                	<i class="icon-move">sss</i>
                	<a class="icon-move">sss</a>
                  	Item 3
                  	<ol>
	                    <li data-id="3-0" data-name="Item 3.1">Item 3.1<ol></ol></li>
	                    <li data-id="3-1" data-name="Item 3.2">Item 3.2<ol></ol></li>
	                    <li data-id="3-2" data-name="Item 3.3">Item 3.3<ol></ol></li>
	                    <li data-id="3-3" data-name="Item 3.4">Item 3.4<ol></ol></li>
	                    <li data-id="3-4" data-name="Item 3.5">Item 3.5<ol></ol></li>
                    	<li data-id="3-5" data-name="Item 3.6">Item 3.6<ol></ol></li>
                  	</ol>
                </li>
                <li data-id="4" data-name="Item 5">
                	<i class="icon-move">sss</i>
                  	Item 5
                  	<ol></ol>
                </li>
                <li data-id="5" data-name="Item 6">
                  Item 6
                  <ol></ol>
                </li>
              </ol>
              

              
	</body>
</html>